<template>
  <div class="flash-product-wrapper">
    <scroll
      class="flash-item-wrap"
      ref="flashItemWrap"
      :probeType="3"
      :listenScroll="true"
      :scrollX="true"
      :data="$attrs.flashSaleProductsList"
    >
      <ul class="ul-wrpper" ref="ulWrapper">
        <li
          ref="liItem"
          class="item"
          v-for="(item,index) in $attrs.flashSaleProductsList"
          :key="index"
          @click="$listeners.goodsClick(item)"
        >
          <img :src="item.small_image" @load="imgLoad">
          <span class="products-desc">{{item.name}}</span>
          <div class="price-wrap">
            <div class="price">
              <p class="special-price">￥{{item.price}}</p>
              <p class="normal-price">￥{{item.origin_price}}</p>
            </div>
            <div class="buy-cart" @click.stop="addToCart($event, item)">
              <svg-icon iconClass="buycart_red" className="icon-cart"/>
            </div>
          </div>
        </li>
      </ul>
      <transition
        appear
        @after-appear='afterEnter'
        @before-appear="beforeEnter"
        v-for="(item, index) in showMoveDot"
        :key="index"
      >
        <div class="move-dot" ref="ball" v-if="item">
          <img :src="dropImg">
        </div>
      </transition>
    </scroll>
  </div>
</template>

<script>
import GoodsInfo from '../../../assets/js/goodsInfo'
import { mapMutations, mapGetters } from 'vuex'
import { ADD_TO_CART } from '../../../config/pubsub-type'
import setSlideWidth from '@/assets/js/setSlideWidth'

export default {
  name: 'FlashProductList',
  inheritAttrs: true,
  data () {
    return {
      showMoveDot: [], //控制下落的小圆点显示隐藏
      dropImg: '',
      elLeft: 0, // 当前点击购物车按钮在网页中的绝对left值
      elTop: 0 // 当前点击购物车按钮在网页中的绝对top值
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  created () {
    this.dropBalls = []
  },
  mounted () {
    this.$nextTick(() => {
      this._initBScroll()
    })
  },
  methods: {
    imgLoad () {
      if (!this.checked) {
        this.$refs.flashItemWrap.refresh()
        this.checked = true
      }
    },
    beforeEnter (el) {
      Object.assign(el.style, {
        transform: `translate3d(${this.elLeft - 30}px,${this.elTop - 100}px , 0)`,
        opacity: 0
      })
    },
    afterEnter (el) {
       // 获取底部购物车徽标的位置
      const badgePosition = document.getElementById('buycart').getBoundingClientRect()
      // 设置位移
      el.style.transform = `translate3d(${badgePosition.left + 30}px, ${badgePosition.top - 30}px, 0)`
      // 增加贝塞尔曲线
      el.style.transition = 'transform .88s cubic-bezier(0.3, -0.25, 0.7, -0.15)'
      el.style.transition = 'transform .88s linear'
      this.showMoveDot = this.showMoveDot.map(item => false)
      // 设置透明度
      el.style.opacity = 1
      // 监听小球动画结束方法
      el.addEventListener('transitionend', () => {
        el.style.display = 'none'
        this.listenInCart()
      })
      el.addEventListener('webkitAnimationEnd', () => {
        el.style.display = 'none'
        this.listenInCart()
      })
    },
    listenInCart () {
      document.getElementById('buycart').classList.add('moveToCart')
      setTimeout(() => {
        document.getElementById('buycart').classList.remove('moveToCart')
      }, 500)
    },
    _initBScroll () {
        if (this.$attrs.flashSaleProductsList) {
        const ulWrapper = this.$refs.ulWrapper
        // 计算ul的总宽度
        setSlideWidth(ulWrapper)
      }
    },
    addToCart ($event, item) {
      this.ADD_TO_CART(item)
      // 取出商品图片
      this.userInfo.token && (this.dropImg = item.small_image)
      this.elLeft =  event.target.getBoundingClientRect().left
      this.elTop =  event.target.getBoundingClientRect().top
      this.showMoveDot = [...this.showMoveDot, true]
    },
    ...mapMutations(['ADD_TO_CART'])
  }
  // watch: {
  //    // 监听flashSaleProductsList的值得变化再初始化，防止滚动不生效
  //   flashSaleProductsList () {
  //     this.$nextTick(() => {
  //       this._initBScroll()
  //     })
  //   }
  // }
}

</script>
<style lang='scss' scoped>
.flash-product-wrapper {
  .flash-item-wrap {
    width: 100%;
    overflow: hidden;
    position: relative;
    .ul-wrpper {
      display: flex;
      justify-content: flex-start;
      .item {
        flex: 0 0 px2rem(110);
        align-items: center;
        padding-right: px2rem(8);
        img {
          width: 100%;
          border-radius: 50%;
          background-size: contain;
          background-image: url('../../../assets/img/loading/produce_preload.png');
        }
        .products-desc {
          padding: px2rem(3);
          font-size: px2rem(11);
          height: px2rem(38);
          line-height: px2rem(17);
          @include text-wrap;
        }
        .price-wrap {
          @include flexType(space-around);
          padding-left: px2rem(5);
          .special-price {
            @include setFontColor(px2rem(14), rgb(233, 131, 138));
          }
          .normal-price {
            @include setFontColor(px2rem(10), $text-color-weak);
            text-decoration: line-through;
          }
        }
        .buy-cart {
          padding-right: px2rem(10);
          .icon-cart {
            @include setWH(px2rem(24),px2rem(24));
          }
        }
      }
    }
    .move-dot {
      position: fixed;
      top: px2rem(17.5);
      z-index: 300;
      @include setWH(px2rem(35),px2rem(35));
      border-radius: 50%;
      img {
        @include setWH(px2rem(52),px2rem(52));
        border-radius: 50%;
        animation: .88s mymove ease-in-out;
      }
    }
  }
  @keyframes mymove {
    0% {
      transform: scale(1);
    }
    25% {
      transform: scale(0.8);
    }
    50% {
      transform: scale(0.6);
    }
    75% {
      transform: scale(0.4);
    }
    100% {
      transform: scale(0.2);
    }
  }
  @-moz-keyframes mymove {
    0% {
      transform: scale(1);
    }
    25% {
      transform: scale(0.8);
    }
    50% {
      transform: scale(0.6);
    }
    75% {
      transform: scale(0.4);
    }
    100% {
      transform: scale(0.2);
    }
  }
  @-webkit-keyframes mymove {
    0% {
      transform: scale(1);
    }
    25% {
      transform: scale(0.8);
    }
    50% {
      transform: scale(0.6);
    }
    75% {
      transform: scale(0.4);
    }
    100% {
      transform: scale(0.2);
    }
  }
  @-o-keyframes mymove {
    0% {
      transform: scale(1);
    }
      5% {
      transform: scale(0.8);
    }
    50% {
      transform: scale(0.6);
    }
    75% {
      transform: scale(0.4);
    }
    100% {
      transform: scale(0.2);
    }
  }
}

</style>
